import { connect, FormattedMessage ,history} from 'umi';
import { Button, Card, DatePicker, Input, Form, Select } from 'antd';
import { AvatarUpload } from '@/components/Upload'
import styles from './style.less';
import { useState } from 'react';


const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const Register = (props) => {
    const { 
        dispatch
     } = props;
    const [submitting,setSubmitting] = useState(false)
    const [form] = Form.useForm();
    const formItemLayout = {
        labelCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 7,
            },
        },
        wrapperCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 12,
            },
            md: {
                span: 10,
            },
        },
    };
    const submitFormLayout = {
        wrapperCol: {
            xs: {
                span: 24,
                offset: 0,
            },
            sm: {
                span: 10,
                offset: 7,
            },
        },
    };

    const onFinish = (data) => {
        setSubmitting(true)
        if(dispatch) {
            dispatch({
                type: 'enterprise/createEntereprise',
                payload: data
            }).then(success => {
                if(success) {
                    history.replace('/')
                }
            })
        }
    }

    const onFinishFailed = () => {
    }

    const onValuesChange = () => {
    }

    return (
        <div>
            <Card
                title="创建企业"
                bordered={false}>
                <Form
                    hideRequiredMark
                    style={{
                        marginTop: 8,
                    }}
                    form={form}
                    name="basic"
                    initialValues={{
                        public: '1',
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    onValuesChange={onValuesChange}
                >
                    <FormItem
                        {...formItemLayout}
                        label={"企业名称"}
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: "请输入企业名称",
                            },
                        ]}
                    >
                        <Input
                            placeholder={"请输入企业名称"}
                        />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"企业编码"}
                        name="code"
                        rules={[
                            {
                                required: false,
                                message: "请输入企业编码",
                            },
                        ]}
                    >
                        <Input
                            placeholder={"请输入企业编码"}
                        />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"描述"}
                        name="description"
                        rules={[
                            {
                                required: false,
                                message: "请输入描述",
                            },
                        ]}
                    >
                        <TextArea
                            style={{
                                minHeight: 32,
                            }}
                            placeholder={"描述"}
                            rows={4}
                        />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label={"图标"}
                        name="icon"
                        getValueFromEvent={(e) => {
                            console.log('Upload event:', e);
                            if (e) {
                                return e;
                            }
                        }}
                        rules={[
                            {
                                required: false,
                                message: "请上传图标",
                            },
                        ]}
                    >
                       <AvatarUpload ></AvatarUpload>
                    </FormItem>
                    <FormItem
                        {...submitFormLayout}
                        style={{
                            marginTop: 32,
                        }}
                    >
                        <Button type="primary" htmlType="submit" size="small" loading={submitting}>
                            <FormattedMessage id="common.form.submit" />
                        </Button>
                    </FormItem>
                </Form>
            </Card>
        </div>
    )
}

export default connect(({  }) => ({
  }))(Register);